<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Thông tin shop</title>
		<link rel="stylesheet" href="../css/reset.css" type="text/css" />
		<link rel="stylesheet" href="../css/common.css" type="text/css" />
		<link rel="stylesheet" href="../css/seller.css" type="text/css" />
        <link rel="stylesheet" href="../css/tabbedContent.css" type="text/css" />
        <script src="../scripts/jquery-1.5.2.js" type="text/javascript"></script>
    
   		<script src="../scripts/highcharts.js" type="text/javascript"></script>

		<script src="../scripts/jquery-1.5.2.min.js"></script>
		<script src="../scripts/common.js"></script>
        <script src="../scripts/tabbedContent.js"></script>
        <script type="text/javascript">
		$(document).ready(function(){
			
			$("#btbaosoluongdat").bind("click", function()
			{
				$("#divsoluongdat").show("slows");
				$("#divdoanhthu").slideUp("slows");
			});
			
			$("#btbaodoanhthu").bind("click", function()
			{
				$("#divdoanhthu").show("slows");
				$("#divsoluongdat").slideUp("slows");
			});
			
			
		})
				
		</script>

		<script type="text/javascript">
			var _monthlyRevenueData1;
			var _quaterRevenueData1;
			var _yearlyRevenueData1;
			var _yearlyXData1;
			
			var _monthlyRevenueData;
			var _quaterRevenueData;
			var _yearlyRevenueData;
			var _yearlyXData;
			
			function KhoiTaoDuLieu()
			{
				
				var firstSeries= '123,546,45,4,564,8,567,54,433,25,67,86';  
				
				var secondSeries = '456,125,789,0';
				var thirdSeries = '789,387,589,365';
				var yearXDataSeries = '2011,2012,2013,2015';
				var firstSeries1='123,0,1,4,6,8,123,54,433,25,67,86';  
				var secondSeries1 = '456,125,789,0';
				var thirdSeries1 = '789,387,589,365';
				var yearXData1Series1 = '2011,2012,2013,2015';
				
				var seriesOne = new Array();  		    
				seriesOne= firstSeries.split(',');  
				for(var i=0;i<seriesOne.length;i++)  
				{  
					seriesOne[i]= parseInt(seriesOne[i]);  
				} 
				
				var seriesTwo = new Array();  
				seriesTwo= secondSeries.split(',');  
				for(var i=0;i<seriesTwo.length;i++)  
				{  
					seriesTwo[i]= parseInt(seriesTwo[i]);  
				} 
				
				var seriesThree = new Array();  
				seriesThree= thirdSeries.split(',');  
				for(var i=0;i<seriesThree.length;i++)  
				{  
					seriesThree[i]= parseInt(seriesThree[i]);  
				} 
				
				var yearXData = new Array();  
				yearXData= yearXDataSeries.split(',');  
				for(var i=0;i<yearXData.length;i++)  
				{  
					yearXData[i]= parseInt(yearXData[i]);  
				} 
				
				 _monthlyRevenueData = seriesOne;
				 _quaterRevenueData =  seriesTwo;
				 _yearlyRevenueData = seriesThree;
				 _yearlyXData = yearXData;
				
				var seriesOne1 = new Array();  		    
				seriesOne1= firstSeries1.split(',');  
				for(var i=0;i<seriesOne1.length;i++)  
				{  
					seriesOne1[i]= parseInt(seriesOne1[i]);  
				} 
				
				var seriesTwo1 = new Array();  
				seriesTwo1= secondSeries1.split(',');  
				for(var i=0;i<seriesTwo1.length;i++)  
				{  
					seriesTwo1[i]= parseInt(seriesTwo1[i]);  
				} 
				
				var seriesThree1 = new Array();  
				seriesThree1= thirdSeries1.split(',');  
				for(var i=0;i<seriesThree1.length;i++)  
				{  
					seriesThree1[i]= parseInt(seriesThree1[i]);  
				} 
				
				var yearXData1 = new Array();  
				yearXData1= yearXData1Series1.split(',');  
				for(var i=0;i<yearXData1.length;i++)  
				{  
					yearXData1[i]= parseInt(yearXData1[i]);  
				} 
				
				 _monthlyRevenueData1 = seriesOne1;
				 _quaterRevenueData1 =  seriesTwo1;
				 _yearlyRevenueData1 = seriesThree1;
				 _yearlyXData1 = yearXData1;
			}
		   
            
		    
            
			var chart;
			
			function DrawChartforMonthlyRevenueReport()
			{
			    chart = new Highcharts.Chart({
					chart: {
						renderTo: 'monthly_container',
						defaultSeriesType: 'column',
						margin: [ 50, 50, 100, 80]
					},
					title: {
						text: 'Số lượng đặt hàng'
					},
					xAxis: {
						categories: [
							'Tháng 1', 
							'Tháng 2', 
							'Tháng 3', 
							'Tháng 4', 
							'Tháng 5',
							'Tháng 6',
							'Tháng 7',
							'Tháng 8',
							'Tháng 9',
							'Tháng 10',
							'Tháng 11',
							'Tháng 12',
							
						] ,
						labels: {
							rotation: -45,
							align: 'right',
							style: {
								 font: 'normal 13px Verdana, sans-serif'
							}
						}
					},
					yAxis: {
						min: 0,
						title: {
							text: 'Doanh Thu'
						}
					},
					legend: {
						enabled: false
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.x +'</b><br/>'+
								 'doanh thu: '+ Highcharts.numberFormat(this.y, 1) + ' VND' ;
								 
						}
					},
				        series: [{
						name: 'Doanh Thu',
						data: _monthlyRevenueData,
						dataLabels: {
							enabled: true,
							rotation: -90,
							color: '#FFFFFF',
							align: 'right',
							x: -3,
							y: 10,
							formatter: function() {
								return this.y;
							},
							style: {
								font: 'normal 13px Verdana, sans-serif'
							}
						}			
					}]
				});
				
				$('tspan').last().remove();
			};
			
			
			
            var chart_2;
			function DrawChartforQuaterRevenueReport() {
				chart_2 = new Highcharts.Chart({
					chart: {
						renderTo: 'quater_container',
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
					title: {
						text: 'Bi?u Ð? Doanh Thu Theo Quý'
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.y, 1) +' VND';
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: true,
								color: '#000000',
								connectorColor: '#000000',
								formatter: function() {
									return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.y, 1) +' VND';
								}
							}
						}
					},
				    series: [{
						type: 'pie',
						name: 'Doanh Thu',
						data: [
							['Quý 1',   _quaterRevenueData[0]],
							['Quý 2',   _quaterRevenueData[1]],
							['Quý 3',   _quaterRevenueData[2]],
							['Quý 4',   _quaterRevenueData[3]],
							
						]
					}]
				});
				$('tspan').last().remove();
			};
			
			var chart3;		
			function DrawChartforYearlyRevenueReport()
			{
			    chart3 = new Highcharts.Chart({
					chart: {
						renderTo: 'yearly_container',
						defaultSeriesType: 'column',
						margin: [ 50, 50, 100, 80]
					},
					title: {
						text: 'Doanh Thu Theo T?ng Nam'
					},
					xAxis: {
						categories: _yearlyXData ,
						labels: {
							rotation: -45,
							align: 'right',
							style: {
								 font: 'normal 13px Verdana, sans-serif'
							}
						}
					},
					yAxis: {
						min: 0,
						title: {
							text: 'Doanh Thu'
						}
					},
					legend: {
						enabled: false
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.x +'</b><br/>'+
								 'doanh thu: '+ Highcharts.numberFormat(this.y, 1) + ' VND' ;
								 
						}
					},
				        series: [{
						name: 'Doanh Thu',
						data: _yearlyRevenueData,
						dataLabels: {
							enabled: true,
							rotation: -90,
							color: '#FFFFFF',
							align: 'right',
							x: -3,
							y: 10,
							formatter: function() {
								return this.y;
							},
							style: {
								font: 'normal 13px Verdana, sans-serif'
							}
						}			
					}]
				});
				
				$('tspan').last().remove();
			};
	
		</script>
			
		<script type="text/javascript"> 
			

		    
            
			var chart;
			
			function DrawChartforMonthlyRevenueReport1()
			{
			    chart = new Highcharts.Chart({
					chart: {
						renderTo: 'monthly_container1',
						defaultSeriesType: 'column',
						margin: [ 50, 50, 100, 80]
					},
					title: {
						text: 'Doanh Thu Theo Từng Tháng'
					},
					xAxis: {
						categories: [
							'Tháng 1', 
							'Tháng 2', 
							'Tháng 3', 
							'Tháng 4', 
							'Tháng 5',
							'Tháng 6',
							'Tháng 7',
							'Tháng 8',
							'Tháng 9',
							'Tháng 10',
							'Tháng 11',
							'Tháng 12',
							
						] ,
						labels: {
							rotation: -45,
							align: 'right',
							style: {
								 font: 'normal 13px Verdana, sans-serif'
							}
						}
					},
					yAxis: {
						min: 0,
						title: {
							text: 'Doanh Thu'
						}
					},
					legend: {
						enabled: false
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.x +'</b><br/>'+
								 'doanh thu: '+ Highcharts.numberFormat(this.y, 1) + ' VND' ;
								 
						}
					},
				        series: [{
						name: 'Doanh Thu',
						data: _monthlyRevenueData1,
						dataLabels: {
							enabled: true,
							rotation: -90,
							color: '#FFFFFF',
							align: 'right',
							x: -3,
							y: 10,
							formatter: function() {
								return this.y;
							},
							style: {
								font: 'normal 13px Verdana, sans-serif'
							}
						}			
					}]
				});
				
				$('tspan').last().remove();
			};
			
			
			
            var chart_2;
			function DrawChartforQuaterRevenueReport1() {
				chart_2 = new Highcharts.Chart({
					chart: {
						renderTo: 'quater_container1',
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
					title: {
						text: 'Biểu Đồ Doanh Thu Theo Quý'
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.y, 1) +' VND';
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: true,
								color: '#000000',
								connectorColor: '#000000',
								formatter: function() {
									return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.y, 1) +' VND';
								}
							}
						}
					},
				    series: [{
						type: 'pie',
						name: 'Doanh Thu',
						data: [
							['Quý 1',   _quaterRevenueData1[0]],
							['Quý 2',   _quaterRevenueData1[1]],
							['Quý 3',   _quaterRevenueData1[2]],
							['Quý 4',   _quaterRevenueData1[3]],
							
						]
					}]
				});
				$('tspan').last().remove();
			};
			
			var chart3;		
			function DrawChartforYearlyRevenueReport1()
			{
			    chart3 = new Highcharts.Chart({
					chart: {
						renderTo: 'yearly_container1',
						defaultSeriesType: 'column',
						margin: [ 50, 50, 100, 80]
					},
					title: {
						text: 'Doanh Thu Theo Từng Năm'
					},
					xAxis: {
						categories: _yearlyXData1 ,
						labels: {
							rotation: -45,
							align: 'right',
							style: {
								 font: 'normal 13px Verdana, sans-serif'
							}
						}
					},
					yAxis: {
						min: 0,
						title: {
							text: 'Doanh Thu'
						}
					},
					legend: {
						enabled: false
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.x +'</b><br/>'+
								 'doanh thu: '+ Highcharts.numberFormat(this.y, 1) + ' VND' ;
								 
						}
					},
				        series: [{
						name: 'Doanh Thu',
						data: _yearlyRevenueData1,
						dataLabels: {
							enabled: true,
							rotation: -90,
							color: '#FFFFFF',
							align: 'right',
							x: -3,
							y: 10,
							formatter: function() {
								return this.y;
							},
							style: {
								font: 'normal 13px Verdana, sans-serif'
							}
						}			
					}]
				});
				
				$('tspan').last().remove();
			};
	
		</script>
	</head>
	<body onload="KhoiTaoDuLieu()">
		<div id="page">
			<?php
				require("../DAO/DataHelper.php");
				require("../webconfig.php");
				require("../DAO/TaiKhoan_DAO.php");
				require("../UserControl/header.php");
				
			?>

			<div id="content">
				<div id="shop-banner">
					<img src="../temp/shop-banner.jpg" />
				</div>
				<?php
					require("../UserControl_NguoiBan/MenuDanhMucChucNang.php");
				?>
				<div id="seller-shop-info" class="block layout-2col-col2">
					<div class="title">
					  <h3>Thống kê</h3>
				  </div>
					<div class="content">
						<div class='tabbed_content'> 
							<div class='tabs'> 
								<div class='moving_bg'> 
									&nbsp;
								</div> 
								<span class='tab_item'> 
									Thống kê số lượng đặt hàng
								</span> 
								<span class='tab_item'> 
									Thống kê doanh thu
								</span> 
							</div> 
					
							<div class='slide_content'>						
								<div class='tabslider'> 
									<ul> 
										<input type="button" class="button" id="btMonthlyRevenueClick" value="Xuất biểu đồ báo cáo số lượng đặt hàng theo tháng" onclick="DrawChartforMonthlyRevenueReport();" style="cursor: pointer;" />
										<br />
										<br />
										<div id="monthly_container" style="width: 680px; height: 400px; margin: 0 auto">
										</div>
										<br />
										<input type="button" class="button" id="idQuaterRevenueClick" value="Xuất biểu đồ báo cáo số lượng đặt hàng theo quý"
											onclick="DrawChartforQuaterRevenueReport();" style="cursor: pointer;" />
										<br />
										<br />
										<div id="quater_container" style="width: 680px; height: 400px; margin: 0 auto">
										</div>
										<br />
										<input type="button" class="button" id="idYearkyRevenue" value="Xuất biểu đồ báo cáo số lượng đặt hàng theo năm"
											onclick="DrawChartforYearlyRevenueReport();" style="cursor: pointer;" />
										<br />
										<br />
										<div id="yearly_container" style="width: 680px; height: 400px; margin: 0 auto">
										</div>
									</ul> 
									<ul> 
										<input type="button" class="button" id="btMonthlyRevenueClick" value="Xuất biểu đồ báo cáo doanh thu theo tháng" onclick="DrawChartforMonthlyRevenueReport1();" style="cursor: pointer;" />
										<br />
										<br />
										<div id="monthly_container1" style="width: 680px; height: 400px; margin: 0 auto">
										</div>
										<br />
										<input type="button" class="button" id="idQuaterRevenueClick" value="Xuất biểu đồ báo cáo doanh thu theo quý"
											onclick="DrawChartforQuaterRevenueReport1();" style="cursor: pointer;" />
										<br />
										<br />
										<div id="quater_container1" style="width: 680px; height: 400px; margin: 0 auto">
										</div>
										<br />
										<input type="button" class="button" id="idYearkyRevenue1" value="Xuất biểu đồ báo cáo doanh thu theo năm"
											onclick="DrawChartforYearlyRevenueReport1();" style="cursor: pointer;" />
										<br />
										<br />
										<div id="yearly_container1" style="width: 680px; height: 400px; margin: 0 auto">
										</div>
									</ul> 
								</div> 
								<br style='clear: both' /> 
							</div> 
						</div>
					</div>
				</div>
			</div>
			<?php
				require("../UserControl/footer.php");
			?>
		</div>
	</body>
</html>
